<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<!-- 对象用法：采用键值形式，键是所需要声明的css属性，值是在data中进行声明的属性 -->
			<div :style="{ width: widthS, height: heightS, border: borderS }">
				对象用法
			</div>

			<!-- 上面这个用法不方便维护，可读性差，所有可以使用对象的简写用法 -->
			<div :style="objStyle">对象简写用法</div>

			<!-- 数组用法：数组里面的每一项都是样式对象 -->
			<div :style="[objStyle, fontStyle]">数组用法</div>
		</div>

		<script src="/scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					widthS: '100px',
					heightS: '100px',
					borderS: '1px solid red',
					// 对象简写法
					objStyle: {
						width: '100px',
						height: '100px',
						border: '1px solid skyblue',
					},
					fontStyle: {
						fontSize: '20px',
						color: 'lime',
					},
				},
				methods: {},
			})
		</script>
	</body>
</html>
